<template>
  <div class="team-card" @click="handleCardClick">
    <div class="card-header">
      <div class="team-avatar">
        <el-avatar 
          :size="48" 
          :src="team.teamAvatarUrl"
          :icon="UserFilled"
        >
          {{ team.name.charAt(0).toUpperCase() }}
        </el-avatar>
      </div>
      <div class="team-info">
        <h3 class="team-name">{{ team.name }}</h3>
        <el-tag 
          :type="getTeamStatusType(team.status)" 
          size="small"
        >
          {{ getTeamStatusLabel(team.status) }}
        </el-tag>
      </div>
      <div class="card-actions" @click.stop>
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button :icon="MoreFilled" circle size="small" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="view" :icon="View">
                {{ $t('common.view') }}
              </el-dropdown-item>
              <el-dropdown-item 
                command="edit" 
                :icon="Edit"
                v-if="canManage"
              >
                {{ $t('common.edit') }}
              </el-dropdown-item>
              <el-dropdown-item 
                command="delete" 
                :icon="Delete"
                v-if="canDelete"
                divided
              >
                {{ $t('common.delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="card-body">
      <p class="team-description">
        {{ team.description || $t('team.noDescription') }}
      </p>
      
      <div class="team-stats">
        <div class="stat-item">
          <span class="stat-label">{{ $t('team.members') }}</span>
          <span class="stat-value">{{ team.currentMembers }}/{{ team.maxMembers }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">{{ $t('team.created') }}</span>
          <span class="stat-value">{{ formatDate(team.createdAt) }}</span>
        </div>
      </div>
    </div>

    <div class="card-footer">
      <div class="member-progress">
        <el-progress 
          :percentage="memberPercentage" 
          :stroke-width="6"
          :show-text="false"
          :color="progressColor"
        />
        <span class="progress-text">
          {{ $t('team.memberProgress', { current: team.currentMembers, max: team.maxMembers }) }}
        </span>
      </div>
      
      <div class="quick-actions">
        <el-button 
          type="primary" 
          size="small" 
          @click.stop="$emit('view', team)"
        >
          {{ $t('team.enter') }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { 
  UserFilled, 
  MoreFilled, 
  View, 
  Edit, 
  Delete 
} from '@element-plus/icons-vue'
import type { Team } from '@/types/team'
import { 
  getTeamStatusLabel, 
  getTeamStatusType,
  canManageTeam,
  canDeleteTeam
} from '@/types/team'
import { formatDate } from '@/utils/date'

interface Props {
  team: Team
}

interface Emits {
  (e: 'view', team: Team): void
  (e: 'edit', team: Team): void
  (e: 'delete', team: Team): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const { t } = useI18n()

// 计算属性
const memberPercentage = computed(() => {
  return Math.round((props.team.currentMembers / props.team.maxMembers) * 100)
})

const progressColor = computed(() => {
  const percentage = memberPercentage.value
  if (percentage >= 90) return '#f56c6c'
  if (percentage >= 70) return '#e6a23c'
  return '#67c23a'
})

const canManage = computed(() => {
  // 这里应该根据当前用户在团队中的角色判断
  // 暂时返回true，实际应该从store获取用户角色
  return true
})

const canDelete = computed(() => {
  // 这里应该根据当前用户是否为团队所有者判断
  // 暂时返回true，实际应该从store获取用户角色
  return true
})

// 方法
const handleCardClick = () => {
  emit('view', props.team)
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'view':
      emit('view', props.team)
      break
    case 'edit':
      emit('edit', props.team)
      break
    case 'delete':
      emit('delete', props.team)
      break
  }
}
</script>

<style scoped lang="scss">
.team-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  // height: 280px;
  display: flex;
  flex-direction: column;

  &:hover {
    border-color: var(--el-color-primary);
    // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;

    .team-avatar {
      flex-shrink: 0;
    }

    .team-info {
      flex: 1;
      min-width: 0;

      .team-name {
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .card-actions {
      flex-shrink: 0;
    }
  }

  .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;

    .team-description {
      margin: 0 0 16px 0;
      color: var(--el-text-color-regular);
      font-size: 14px;
      line-height: 1.5;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      flex: 1;
    }

    .team-stats {
      display: flex;
      gap: 24px;

      .stat-item {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .stat-label {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }

        .stat-value {
          font-size: 14px;
          font-weight: 500;
          color: var(--el-text-color-primary);
        }
      }
    }
  }

  .card-footer {
    margin-top: 16px;
    .member-progress {
      margin-bottom: 12px;

      .progress-text {
        font-size: 12px;
        color: var(--el-text-color-secondary);
        margin-top: 4px;
        display: block;
      }
    }

    .quick-actions {
      display: flex;
      justify-content: flex-end;
    }
  }
}

// 状态特殊样式
.team-card {
  &[data-status="PENDING"] {
    border-color: var(--el-color-warning);
    background: var(--el-color-warning-light-9);
  }

  &[data-status="REJECTED"] {
    border-color: var(--el-color-danger);
    background: var(--el-color-danger-light-9);
  }

  &[data-status="ARCHIVED"] {
    opacity: 0.7;
    border-color: var(--el-color-info);
    background: var(--el-color-info-light-9);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .team-card {
    height: auto;
    min-height: 240px;

    .card-header {
      .team-info {
        .team-name {
          font-size: 14px;
        }
      }
    }

    .card-body {
      .team-stats {
        gap: 16px;
      }
    }
  }
}
</style>
